<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
  3.条件渲染
3-1 条件渲染
v-if 是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建,v-if 也是惰性的:如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。
相比之下，v-show 简单许多，元素无论初始条件如何，始终会被渲染，只有 CSS display 属性会被切换.总的来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好;如果在运行时绑定条件很少改变，则 v-if 会更合适。

 -->

    <div id="box">
        <!-- 绑定input事件 -->
        <!-- <input type="text" @input="handleInput"> -->
        <!-- v-model指令写法 -->
        <input type="text" v-model="mytext">

        <button @click="handleAdd">Add</button> {{mytext}}

        <ul v-if="datalist.length">
            <li v-for="item,index in datalist">{{item}}
                <!-- <button @click="handleDel(index)">删除</button> -->
                <button @click="handleDel(index)">删除</button>
            </li>

        </ul>
        <div v-else>暂无待办事项</div>
    </div>

    <script>
        var obj = {
            data() {
                return {
                    mytext: '',
                    datalist: ["11", "22", '33']
                }
            },
            methods: {
                handleAdd(ev) {
                    this.datalist.push(this.mytext)
                        // 添加完后清空输入框
                    this.mytext = ''
                },
                handleDel(index) {
                    this.datalist.splice(index, 1)
                },
                // 采用v-model后就可以双向绑定，不用再手动绑定input事件了
                // handleInput(ev) {
                //     console.log(ev.target.value)
                // }
            }
        }

        var app = Vue.createApp(obj).mount('#box')
    </script>
</body>

</html>